<template>
  <section class="seckillcontent">
    <nav class="nav_1" v-if="showNav">
      <i class="cubeic-back" @click="backClick"></i>
      京东秒杀
    </nav>
    <nav class="nav_2" v-if="!showNav" :style="opacityActive">
      <i class="cubeic-back" @click="backClick"></i>
      京东秒杀
    </nav>
    <ul class="box">
      <li v-for="item of seckillData" :key="item.id">
        <div class="left">
          <img v-lazy="item.imgUrl" alt=""/>
        </div>
        <div class="right">
          <h3>{{item.title}}</h3>
          <span v-show="item.label" class="title">{{item.label}}</span>
          <div class="item">
            <div class="item_left">
              <p class="sp1"><span>￥</span>{{item.price}}</p>
              <p class="sp2">￥{{item.removePrice}}</p>
            </div>
            <div class="item_right">
              <span class="shop">立即抢购</span>
              <p class="strip">
                <span class="sp1">已抢{{item.num}}</span>
                <span class="sp2" id="sp2" :style="{width: item.num}" ></span>
              </p>
            </div>
          </div>
        </div>
      </li>
    </ul>
  </section>
</template>

<script>
export default {
  name: 'SeckillContent',
  data () {
    return {
      seckillData: [],
      showNav: true,
      opacityActive: {
        opacity: 0
      },
      widthPercentage: {
        width: 0
      }
    }
  },
  async created () {
    const relust = await this.axios.get('/homeSeckillList')
    this.seckillData = relust
    // console.log(relust)
  },
  methods: {
    backClick () {
      this.$router.go(-1)
    },
    handleScroll () {
      let top = document.documentElement.scrollTop
      if (top > 20) {
        let opacity = top / 40
        opacity = opacity > 1 ? 1 : opacity
        this.opacityActive = { opacity: opacity }
        this.showNav = false
      } else {
        this.showNav = true
      }
    }
  },
  activated () {
    window.addEventListener('scroll', this.handleScroll)
  },
  deactivated () {
    window.removeEventListener('scroll', this.handleScroll)
  }
}
</script>

<style lang="stylus" scoped>
  @import '../../../../../../../assets/styl/color.styl'
.seckillcontent
    nav
      text-align center
      position fixed
      top 0
      z-index 99
      width 100%
      padding 13px 0
      font-size 16px
      color #333
      .cubeic-back
        position absolute
        font-size 18px
        left 3%
    .nav_1
      background white
      color #333
    .nav_2
      background linear-gradient(to right, #ED4F66, #FDE1B1)
      color #fff
      transition all .3s ease
      box-sizing 12px 12px 2px red
    .box
      margin 45px 0 55px
      background #ffffff
      li
        margin 10px
        padding 12px 0
        border-bottom  2px solid #f6f6f6
        display flex
        justify-content space-between
        box-sizing border-box
        .left
          width 30%
          margin-right 4%
          img
            width 100%
        .right
          flex 1
          position relative
          h3
            font-size 15px
            color #333
            ellipsis()
          .title
            border 1px solid #E93B3D
            color #E93B3D
            font-size 12px
            padding 4px 4px 2px
          .item
            position absolute
            width 100%
            bottom 0
            display flex
            justify-content space-between
            .item_left
              color #e93b3d
              .sp1
                font-weight 600
                font-size 20px
                margin-bottom 8px
                span
                  font-size 12px
              .sp2
                text-decoration line-through
                color #999
                font-size 14px
            .item_right
              margin-top -10px
              .shop
                background linear-gradient(to right, #E93B3D, #FF9574)
                font-size 14px
                padding 8px 12px
                color #fff
                border-radius 20px
              .strip
                margin-top 13px
                width 80px
                border-radius 20px
                text-align center
                color #fff
                font-size 12px
                overflow hidden
                background #FFCAC1
                position relative
                .sp1
                  position relative
                  top 0
                  left 0
                  z-index 88
                  height 100%
                  width 100%
                  display inline-block
                  padding 2.5px 0 1px
                .sp2
                  position absolute
                  top 0
                  left 0
                  z-index 5
                  padding 2.5px 0 1px
                  display inline-block
                  background-image: linear-gradient(90deg, #e93b3d, #ff9574);
                  height 100%
</style>
